<template>
  <view class="app">
    <!-- 加载状态显示 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner">
        <view class="loading-bounce"></view>
      </view>
      <text class="loading-text">加载中...</text>
    </view>

    <view v-else>
      <view class="price-box" v-if="orderInfo">
        <text class="title">支付金额</text>
        <text class="price">¥{{ orderInfo.totalAmount }}</text>
        <view class="countdown">
          <text>剩余</text>
          <text class="time">{{ formatSeconds(orderInfo.remainSeconds) }}</text>
          <text>支付关闭</text>
        </view>
      </view>

<!--    <view class="pay-type-list">-->

<!--      <view class="type-item b-b" @click="changePayType(1)">-->
<!--        <text class="icon yticon icon-weixinzhifu"></text>-->
<!--        <view class="con">-->
<!--          <text class="tit">微信支付</text>-->
<!--          <text>推荐使用微信支付</text>-->
<!--        </view>-->
<!--        <label class="radio">-->
<!--          <radio value="" color="#fa436a" :checked='payType == 1'>-->
<!--          </radio>-->
<!--        </label>-->
<!--      </view>-->
<!--      <view class="type-item b-b" @click="changePayType(2)">-->
<!--        <text class="icon yticon icon-alipay"></text>-->
<!--        <view class="con">-->
<!--          <text class="tit">支付宝支付</text>-->
<!--        </view>-->
<!--        <label class="radio">-->
<!--          <radio value="" color="#fa436a" :checked='payType == 2'>-->
<!--          </radio>-->
<!--        </label>-->
<!--      </view>-->
<!--      <view class="type-item" @click="changePayType(3)">-->
<!--        <text class="icon yticon icon-erjiye-yucunkuan"></text>-->
<!--        <view class="con">-->
<!--          <text class="tit">预存款支付</text>-->
<!--          <text>可用余额 ¥198.5</text>-->
<!--        </view>-->
<!--        <label class="radio">-->
<!--          <radio value="" color="#fa436a" :checked='payType == 3'>-->
<!--          </radio>-->
<!--        </label>-->
<!--      </view>-->
<!--    </view>-->

      <button class="submit-btn" @click="confirm" :class="{'loading': isSubmitting}" :disabled="isSubmitting">
        {{ isSubmitting ? '处理中...' : '立即下单' }}
      </button>
    </view>
  </view>
</template>

<script>

import {getSellOrder, payOrder} from "@/api/sell/sellOrder";
import {formatSeconds} from '@/utils/ruoyi'

export default {
  data() {
    return {
      payType: 1,
      orderInfo: null,
      timer: null,
      isLoading: true,
      isSubmitting: false
    };
  },
  computed: {},
  onLoad(options) {
    // 显示加载动画
    this.isLoading = true;
    
    getSellOrder(options.orderId).then(res => {
      this.orderInfo = res.data
      this.timer = setInterval(() => {
        if (this.orderInfo.remainSeconds > 0) {
          this.orderInfo.remainSeconds--;
        } else {
          clearInterval(this.timer)
          this.timer = null;
          uni.showToast({
            title: '订单已关闭',
            icon: 'none'
          })
          uni.navigateTo({
            path: '/pages/index'
          })
        }
      }, 1000)
      
      // 添加延迟以展示加载效果
      setTimeout(() => {
        this.isLoading = false;
      }, 600);
    }).catch(error => {
      console.error('获取订单信息失败:', error);
      uni.showToast({
        title: '获取订单信息失败',
        icon: 'none'
      });
      this.isLoading = false;
    })
  },

  methods: {
    formatSeconds,
    //选择支付方式
    changePayType(type) {
      this.payType = type;
    },
    //确认支付
    confirm() {
      // 避免重复提交
      if (this.isSubmitting) {
        return;
      }
      
      this.isSubmitting = true;
      
      const data = {
        orderId: this.orderInfo.id,
        payAmount: this.orderInfo.totalAmount
      };
      payOrder(data).then(res => {
        uni.redirectTo({
          url: '/pages/sellment/money/paySuccess'
        })
      }).catch(error => {
        console.error('支付失败:', error);
        uni.showToast({
          title: '支付失败，请重试',
          icon: 'none'
        });
      }).finally(() => {
        this.isSubmitting = false;
      })
    },
  },
  onUnload() {
    // 清除定时器，避免内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style lang='scss' scoped>
page {
  background: #f8f8f8;
}

/* 关键帧动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0);
  }
  50% { 
    transform: scale(1.0);
  }
}

@keyframes loading-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100rpx);
  animation: fadeIn 0.5s ease-out;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

.app {
  width: 100%;
  padding: 20rpx;
}

.price-box {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  animation: slideUp 0.5s ease-out;
  
  .title {
    font-size: 28rpx;
    color: #666;
  }

  .price {
    font-size: 64rpx;
    color: #333;
    font-weight: 500;
    margin: 30rpx 0;
  }

  .countdown {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #999;

    .time {
      color: #e84d1c;
      margin: 0 8rpx;
      font-weight: 500;
    }
  }
}

.submit-btn {
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690rpx;
  height: 88rpx;
  font-size: 32rpx;
  color: #fff;
  background: linear-gradient(90deg, #e84d1c, #f06e44);
  border-radius: 44rpx;
  box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.3);
  animation: slideUp 0.5s ease-out;
  animation-delay: 0.1s;
  position: relative;
  overflow: hidden;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
  }
  
  &.loading {
    opacity: 0.9;
    
    &:after {
      content: '';
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      animation: loading-shine 1.5s infinite;
    }
  }
  
  &:disabled {
    opacity: 0.7;
  }
}

.pay-type-list {
  margin-top: 20upx;
  background-color: #fff;
  padding-left: 60upx;
  animation: slideUp 0.5s ease-out;
  animation-delay: 0.2s;

  .type-item {
    height: 120upx;
    padding: 20upx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 60upx;
    font-size: 30upx;
    position: relative;
  }

  .icon {
    width: 100upx;
    font-size: 52upx;
  }

  .icon-erjiye-yucunkuan {
    color: #fe8e2e;
  }

  .icon-weixinzhifu {
    color: #36cb59;
  }

  .icon-alipay {
    color: #01aaef;
  }

  .tit {
    font-size: $font-lg;
    color: $font-color-dark;
    margin-bottom: 4upx;
  }

  .con {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-sm;
    color: $font-color-light;
  }
}

</style>
